<template>
  <div class="create-plan-container">
    <div class="page-header">
      <h2>{{ isEdit ? '编辑战术方案' : '创建战术方案' }}</h2>
      <el-button @click="$router.push('/tactical-plan/list')">返回列表</el-button>
    </div>

    <el-card shadow="hover">
      <el-form 
        ref="planFormRef" 
        :model="planForm" 
        :rules="planRules" 
        label-width="120px"
        label-position="right"
        class="plan-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="方案名称" prop="name">
                <el-input v-model="planForm.name" placeholder="请输入方案名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="方案类型" prop="type">
                <el-select v-model="planForm.type" placeholder="请选择方案类型" style="width: 100%">
                  <el-option label="单兵作战" value="single" />
                  <el-option label="系统协同" value="collaboration" />
                  <el-option label="攻防对抗" value="confrontation" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="业务场景" prop="scenario">
                <el-select v-model="planForm.scenario" placeholder="请选择业务场景" style="width: 100%">
                  <el-option label="无人机场景" value="drone" />
                  <el-option label="工业自动化" value="industrial" />
                  <el-option label="航电场景" value="avionics" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总线类型" prop="busType">
                <el-select v-model="planForm.busType" placeholder="请选择总线类型" style="width: 100%">
                  <el-option label="RS232" value="RS232" />
                  <el-option label="USB" value="USB" />
                  <el-option label="RS485" value="RS485" />
                  <el-option label="1553B" value="1553B" />
                  <el-option label="CAN" value="CAN" />
                  <el-option label="Modbus" value="Modbus" />
                  <el-option label="ARINC429" value="ARINC429" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="方案描述" prop="description">
            <el-input v-model="planForm.description" type="textarea" :rows="3" placeholder="请输入方案描述" />
          </el-form-item>
        </div>

        <!-- 攻击过程配置 -->
        <div class="form-section">
          <h3 class="section-title">攻击过程配置</h3>
          <el-form-item label="攻击类型" prop="attackType">
            <el-radio-group v-model="planForm.attackType">
              <el-radio label="external">外部环境渗透攻击</el-radio>
              <el-radio label="internal">内部环境植入攻击</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 外部环境渗透攻击方法 -->
          <el-form-item 
            label="攻击方法" 
            prop="attackTechniques"
            v-if="planForm.attackType === 'external'"
          >
            <el-checkbox-group v-model="planForm.attackTechniques">
              <el-checkbox label="链路嗅探">链路嗅探</el-checkbox>
              <el-checkbox label="消息劫持">消息劫持</el-checkbox>
              <el-checkbox label="数据重放">数据重放</el-checkbox>
              <el-checkbox label="DoS">DoS</el-checkbox>
              <el-checkbox label="泛洪">泛洪</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 内部环境植入攻击方法 -->
          <el-form-item 
            label="攻击方法" 
            prop="attackTechniques"
            v-if="planForm.attackType === 'internal'"
          >
            <el-tabs v-model="internalAttackTab">
              <el-tab-pane label="固件攻击" name="firmware">
                <el-checkbox-group v-model="planForm.attackTechniques">
                  <el-checkbox label="固件投毒">固件投毒</el-checkbox>
                  <el-checkbox label="逆向破解">逆向破解</el-checkbox>
                  <el-checkbox label="后门植入">后门植入</el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
              <el-tab-pane label="嵌入式板卡攻击" name="hardware">
                <el-checkbox-group v-model="planForm.attackTechniques">
                  <el-checkbox label="侧信道分析">侧信道分析</el-checkbox>
                  <el-checkbox label="故障注入">故障注入</el-checkbox>
                  <el-checkbox label="硬件木马">硬件木马</el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </div>

        <!-- 攻击步骤配置 -->
        <div class="form-section">
          <h3 class="section-title">攻击步骤配置</h3>
          <el-form-item label="攻击步骤" prop="attackSteps">
            <div v-for="(step, index) in planForm.attackSteps" :key="index" class="attack-step">
              <el-row :gutter="10" class="step-row">
                <el-col :span="2" class="step-number">
                  <el-tag type="info" effect="plain">步骤{{ index + 1 }}</el-tag>
                </el-col>
                <el-col :span="7">
                  <el-input v-model="step.name" placeholder="步骤名称" />
                </el-col>
                <el-col :span="13">
                  <el-input v-model="step.description" placeholder="步骤描述" />
                </el-col>
                <el-col :span="2" class="step-actions">
                  <el-button type="danger" circle @click="removeStep(index)" :disabled="planForm.attackSteps.length <= 1">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-col>
              </el-row>
            </div>
            <div class="add-step">
              <el-button type="primary" @click="addStep">
                <el-icon><Plus /></el-icon>
                添加步骤
              </el-button>
            </div>
          </el-form-item>
        </div>

        <!-- 预期效果配置 -->
        <div class="form-section">
          <h3 class="section-title">预期效果配置</h3>
          <el-form-item label="预期效果" prop="expectedOutcome">
            <el-input v-model="planForm.expectedOutcome" type="textarea" :rows="3" placeholder="请描述预期效果" />
          </el-form-item>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="submitForm">{{ isEdit ? '保存修改' : '创建方案' }}</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
/**
 * 创建/编辑战术方案组件
 * @file create.vue
 */

// 表单引用
const planFormRef = ref(null)

// 路由和路由参数
const route = useRoute()
const router = useRouter()

// 是否为编辑模式
const isEdit = computed(() => Boolean(route.query.id))

// 内部攻击选项卡
const internalAttackTab = ref('firmware')

// 表单数据
const planForm = ref({
  name: '',
  type: '',
  scenario: '',
  busType: '',
  description: '',
  attackType: 'external',
  attackTechniques: [],
  attackSteps: [
    { name: '', description: '' }
  ],
  expectedOutcome: ''
})

// 表单验证规则
const planRules = {
  name: [
    { required: true, message: '请输入方案名称', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择方案类型', trigger: 'change' }
  ],
  scenario: [
    { required: true, message: '请选择业务场景', trigger: 'change' }
  ],
  busType: [
    { required: true, message: '请选择总线类型', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入方案描述', trigger: 'blur' }
  ],
  attackType: [
    { required: true, message: '请选择攻击类型', trigger: 'change' }
  ],
  attackTechniques: [
    { type: 'array', required: true, message: '请至少选择一种攻击方法', trigger: 'change' }
  ],
  expectedOutcome: [
    { required: true, message: '请描述预期效果', trigger: 'blur' }
  ]
}

// 初始化表单数据（编辑模式）
onMounted(() => {
  if (isEdit.value) {
    // 模拟从API获取数据
    // 在实际应用中，这里应该调用API获取方案详情
    setTimeout(() => {
      planForm.value = {
        name: '工业控制系统CAN总线监听方案',
        type: 'single',
        scenario: 'industrial',
        busType: 'CAN',
        description: '本方案针对工业控制系统中的CAN总线通信进行监听，获取总线上传输的数据，用于后续的数据分析和漏洞挖掘。',
        attackType: 'external',
        attackTechniques: ['链路嗅探', '数据重放'],
        attackSteps: [
          { name: '环境准备', description: '准备CAN总线分析仪、接口转换器等硬件设备' },
          { name: '接入总线', description: '按照指定方式接入CAN总线，不影响正常通信' },
          { name: '数据监听', description: '启动监听软件，配置正确的波特率和过滤条件' },
          { name: '数据分析', description: '对捕获的数据进行分析，识别关键帧和指令' }
        ],
        expectedOutcome: '成功获取CAN总线上的通信数据，能够解析出设备间通信的关键信息和控制指令，为进一步的攻击操作提供依据。'
      }
    }, 300)
  }
})

// 添加攻击步骤
const addStep = () => {
  planForm.value.attackSteps.push({ name: '', description: '' })
}

// 移除攻击步骤
const removeStep = (index) => {
  planForm.value.attackSteps.splice(index, 1)
}

// 取消表单
const cancelForm = () => {
  router.push('/tactical-plan/list')
}

// 提交表单
const submitForm = async () => {
  if (!planFormRef.value) return
  
  await planFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 模拟表单提交
      ElMessage({
        type: 'success',
        message: isEdit.value ? '方案更新成功' : '方案创建成功'
      })
      
      // 在实际应用中，这里应该调用API提交表单数据
      console.log('表单数据:', planForm.value)
      
      // 提交成功后返回列表页
      router.push('/tactical-plan/list')
    } else {
      console.log('表单验证失败:', fields)
      ElMessage({
        type: 'error',
        message: '表单填写有误，请检查'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.create-plan-container {
  padding: 20px;


    h2 {
      margin: 0;
    }
  

  .plan-form {
    .form-section {
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px dashed #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .section-title {
        font-size: 18px;
        margin-bottom: 20px;
        color: #409EFF;
        font-weight: 500;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 18px;
          background-color: #409EFF;
          border-radius: 2px;
        }
      }

      .attack-step {
        margin-bottom: 10px;

        .step-row {
          display: flex;
          align-items: center;
        }

        .step-number {
          display: flex;
          align-items: center;
        }

        .step-actions {
          display: flex;
          justify-content: center;
        }
      }

      .add-step {
        margin-top: 15px;
      }
    }

    .form-actions {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      gap: 20px;
    }
  }
}
</style> 